<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Graph 3D styles</title>

    <style>
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../graph3d.js"></script>

    <script type="text/javascript">
        var data = null;
        var graph = null;

        google.load("visualization", "1");

        // Set callback to run when API is loaded
        google.setOnLoadCallback(drawVisualization);

        function custom(x, y) {
            return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
        }

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            var style = document.getElementById("style").value;
            var showPerspective = document.getElementById("perspective").checked;
            var xBarWidth = parseFloat(document.getElementById("xBarWidth").value) || undefined;
            var yBarWidth = parseFloat(document.getElementById("yBarWidth").value) || undefined;
            var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;

            // Create and populate a data table.
            data = new google.visualization.DataTable();
            data.addColumn('number', 'x');
            data.addColumn('number', 'y');
            data.addColumn('number', 'z');
            if (withValue) data.addColumn('number', 'value');

            // create some nice looking data with sin/cos
            var steps = 5;  // number of datapoints will be steps*steps
            var axisMax = 10;
            var axisStep = axisMax / steps;
            for (var x = 0; x <= axisMax; x+=axisStep) {
                for (var y = 0; y <= axisMax; y+=axisStep) {
                    var z = custom(x,y);
                    var values = [x, y, z];
                    if (withValue) {
                        var value = (y - x);
                        values.push(value);
                    }
                    data.addRow(values);
                }
            }

            // specify options
            var options = {
                width:  "600px",
                height: "600px",
                style: style,
                xBarWidth: xBarWidth,
                yBarWidth: yBarWidth,
                showPerspective: showPerspective,
                showGrid: true,
                showShadow: false,
                keepAspectRatio: true,
                verticalRatio: 0.5
            };

            var camera = graph ? graph.getCameraPosition() : null;

            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));

            // Draw our graph with the created data and options
            graph.draw(data, options);

            if (camera) graph.setCameraPosition(camera); // restore camera position

            document.getElementById("style").onchange = drawVisualization;
            document.getElementById("perspective").onchange = drawVisualization;
            document.getElementById("xBarWidth").onchange = drawVisualization;
            document.getElementById("yBarWidth").onchange = drawVisualization;
        }
    </script>
</head>

<body>

<p>
    <label for="style"> Style:
    <select id="style">
        <option value="bar">bar</option>
        <option value="bar-color">bar-color</option>
        <option value="bar-size">bar-size</option>

        <option value="dot">dot</option>
        <option value="dot-line">dot-line</option>
        <option value="dot-color">dot-color</option>
        <option value="dot-size">dot-size</option>

        <option value="grid">grid</option>
        <option value="line">line</option>
        <option value="surface">surface</option>
    </select>
    </label>
</p>

<p>
    <label for="perspective">
        <input type="checkbox" id="perspective" checked> Show perspective
    </label>
</p>

<p>
    <label for="xBarWidth"> Bar width X:
        <input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
    </label>
</p>
<p>
    <label for="yBarWidth"> Bar width Y:
        <input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
    </label>
</p>

<div id="mygraph"></div>

<div id="info"></div>
</body>
</html>
